<template>
<div>
  <van-tabs id="nav_pos" v-model="cateId" @click="change">
    <van-tab
      class="item"
      :name="item.id"
      v-for="item in cates"
      :key="item.id"
      :title="item.catename"
    ></van-tab>
  </van-tabs>
  <div class="pos">
      <img :src="require('../../../assets/img/cate_noselect.png')" alt />
      <span>分类</span>
    </div>
  </div>
</template>

<script>

export default {
  props: ["cates"],
  data() {
    return {
      cateId: "",
      title: "",
      value: ""
    };
  },
  methods:{
       change(e) {
      console.log(e);
      this.$router.push("/list?id="+ e + name+'&type=1');
    }
  }
};
</script>

<style scoped>

/* 子导航 */
.van-tabs__nav--line {
  background: #f15a23;
}

/* 固定的分类 */
#nav_pos {
  position: relative !important;
}

.van-tabs__wrap--scrollable .van-tabs__nav {
  background: red !important;
}
.pos {
  width: 1.2rem;
  height: 0.8rem;

  background-color: #f15e29 !important;
  line-height: 0.8rem;
  color: #fff;
  text-align: center;
  position: absolute;
  top:1.6rem;
  right: 0rem;
  background-color: #000;
}
.pos img {
  width: 0.3rem;
  height: 0.3rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}

.group_btn {
  width: 100vw;
  height: 1.22rem;
  display: flex;
  justify-content: space-evenly;
}
.group_btn .item {
  flex: 1;
  padding: 0.2rem;
  text-align: center;
}
.group_btn .item img {
  width: 0.5rem;
  height: 0.5rem;
}
.group_btn .item p {
  font-size: 0.22rem;
  margin-top: 0.08rem;
}
</style>